<template>
  <div class="container-index">
    <img src="../assets/03/decoration.jpg" class="decoration-img" />
    <div
      class="slide-able"
      :class="beatItems.length > 0 ? 'slide-up' : 'slide-down'"
    >
      <div
        class="flex-column align-center input-box animate__animated animate__bounce"
      >
        <div class="flex-row align-center font-field">
          <span class="color-white">为</span>
          <Field
            ref="inputField"
            label-width="1em"
            label-align="right"
            class="heat-name"
            v-model="heatBeatName"
            input-align="center"
            border
            @focus="onInputFocus"
            @blur="onInputBlur"
            @keyup.enter="onKeyEnter"
          ></Field>
          <span class="color-white">心动</span>
        </div>
        <div class="color-white font-tip">(输入你的TA的姓名)</div>
      </div>
    </div>
    <div class="choose-list">
      <transition-group
        enter-active-class="animate__animated animate__slideInUp"
        leave-active-class="animate__animated animate__fadeOutDown animate__faster"
      >
        <div
          v-for="(item, index) in beatItems"
          :key="item.name"
          style="margin-top: 0.24rem;"
        >
          <Button
            @click="chooseBeatType(index)"
            class="choice-btn"
            plain
            type="default"
            size="small"
            >{{ item.name }}</Button
          >
        </div>
      </transition-group>
    </div>
    <div style="height: 10vh;"></div>
    <Popup v-model="showPopup">
      <div
        style="background: #000;width: 100vw;height: 100vh"
        class="flex-column align-center justify-center"
      >
        <div class="bottom-decoration">
          <img src="../assets/04/clothing.png" style="width: 7.06rem;" />
        </div>
        <div class="color-white" key="title">
          选择你和TA的心动方式吧～
        </div>
        <v-touch
          v-if="beatItems.length > 0"
          @swipeleft="leftFn()"
          @swiperight="rightFn()"
          class="create-heart-beat"
        >
          <img
            @click="leftFn()"
            class="icon-arrow"
            src="../assets/left.png"
            alt=""
          />
          <img style="width: 80%;" :src="beatItems[heartBeatTypeIndex].img" />
          <img
            @click="rightFn()"
            class="icon-arrow"
            src="../assets/right.png"
            alt=""
          />
        </v-touch>
        <p
          v-if="beatItems.length > 0"
          class="text-white"
          style="margin-top: -20px;"
        >
          {{ beatItems[heartBeatTypeIndex].name }}
        </p>
        <Button
          style="margin-top: 30px;margin-bottom: 120px;"
          @click="
            () => {
              showPopup = false;
              showPopupResult = true;
            }
          "
          >确定选择</Button
        >
      </div>
    </Popup>
    <Popup v-model="showPopupResult" style="background-color: #000;">
      <div
        style="width: 100vw;height: 100vh;"
        class="flex-column preview-result"
      >
        <img class="img-decoration" src="../assets/05/decoration.png" />
        <img src="../assets/02/logo.png" class="icon-logo" />
        <div class="preview-box">
          <div
            class="text-white"
            style="margin-top: 10.6vh;margin-bottom: .5em"
          >
            此刻心跳
          </div>
          <div class="text-white">为 {{ heatBeatName }} 而动</div>
          <div
            v-if="beatItems.length > 0"
            class="create-heart-beat over-hidden"
          >
            <img
              style="width: 100%;"
              :src="beatItems[heartBeatTypeIndex].img"
            />
          </div>
          <div class="btn-create-reporter">
            <Button
              @click="
                $emit('to-result', {
                  name: heatBeatName,
                  beattype: heartBeatTypeIndex
                })
              "
              >生成专属海报</Button
            >
          </div>
        </div>
      </div>
    </Popup>
  </div>
</template>
<script>
import { Field, Button, Popup } from "vant";
import VueTouch from "vue-touch";
const Items = [
  {
    name: "热恋中",
    img: require("../assets/05/heart-beat-hot.gif")
  },
  {
    name: "恋人未满中",
    img: require("../assets/05/heart-beat-beyond.gif")
  },
  {
    name: "稳定恋爱中",
    img: require("../assets/05/heart-beat-stable.gif")
  }
];
export default {
  components: {
    Field,
    Button,
    Popup,
    vTouch: VueTouch.component
  },
  data() {
    return {
      heatBeatName: "", // 心动名称
      inputBoxFocus: false,
      beatItems: [],
      showPopup: false,
      showPopupResult: false,
      heartBeatTypeIndex: 0
    };
  },
  computed: {
    showItems() {
      return !this.inputBoxFocus && !!this.heatBeatName;
    }
  },
  methods: {
    leftFn() {
      if (this.heartBeatTypeIndex > 0) {
        this.heartBeatTypeIndex = this.heartBeatTypeIndex - 1;
      } else {
        this.heartBeatTypeIndex = 2;
      }
    },
    rightFn() {
      if (this.heartBeatTypeIndex < 2) {
        this.heartBeatTypeIndex = this.heartBeatTypeIndex + 1;
      } else {
        this.heartBeatTypeIndex = 0;
      }
    },
    chooseBeatType(index) {
      this.heartBeatTypeIndex = index;
      this.showPopup = true;
    },
    onInputFocus() {
      this.inputBoxFocus = true;
    },
    onInputBlur() {
      // 失去焦点且有值则输入框位置上移，选择项向上划入
      this.inputBoxFocus = false;
      this.beatItems = this.showItems ? Items : [];
    },
    onKeyEnter() {
      this.$refs.inputField.blur();
    }
  }
};
</script>
<style scoped>
.container-index {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #000;
}
.heat-name {
  width: 4rem;
  background-color: transparent;
  padding: 0;
  margin-bottom: 8px;
  font-size: 0.32rem;
}
.input-box {
  margin-top: 40vh;
}
.color-white {
  color: #ffffff;
}
.slide-able {
  transition: transform 0.5s ease;
}
.slide-up {
  transform: translateY(-10vh);
}
.slide-down {
  transform: translateY(0);
}
.choice-btn {
  width: 100px;
}
.choose-list {
  margin-top: -5vh;
  font-size: 0.32rem;
}
.font-field {
  font-size: 0.32rem;
}
.font-tip {
  font-size: 0.26rem;
}
.decoration-img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 4.77rem;
}
.bottom-decoration {
  position: relative;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 0;
}
.create-heart-beat {
  height: 24vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-result {
  background-image: url(../assets/05/bg.jpg);
  background-size: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative;
}
.preview-box {
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #000;
  margin: 10px 16px 20px;
}
.img-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 5rem;
  margin-left: 20px;
}
.icon-logo {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 58px;
}
.btn-create-reporter {
  margin-top: 0px;
  margin-bottom: 30px;
  text-align: center;
}
.icon-arrow {
  width: 0.6rem;
  height: 0.6rem;
  object-fit: contain;
}
</style>
<style>
.heat-name input {
  color: #ffffff;
}
.van-button.van-button--small {
  font-size: 0.24rem;
  height: 0.64rem;
  width: 2rem;
}
.van-button.van-button--normal {
  font-size: 0.28rem;
  height: 0.64rem;
}
</style>
